<template>
  <div class="todoitem">
    <van-cell>
      <span v-if="action=='undo'">
        <van-checkbox
          ref="checkboxes"
          v-model="done"
          @click="handelCheck(action,index)"
          shape="square"
          style="display: inline-block;"
          title="选择"
        ></van-checkbox>
      </span>
      <span v-else>
        <van-checkbox
          ref="checkboxes"
          v-model="undo"
          @click="handelCheck(action,index)"
          shape="square"
          style="display: inline-block;"
          title="选择"
        ></van-checkbox>
      </span>
      <span :class="action=='undo'?'red content': 'content'">{{(index+1)}}.{{item.Content}}</span>&nbsp;&nbsp;
      <b v-show="action=='undo'?undo:done" @click="handelDelete(action,index)" class="del" title="删除">x</b>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  data() {
    return {
      done: true,
      undo: false,
    };
  },
  props: ["item", "index", "action"],
  methods: {
    handelCheck(action, index) {
      /*this.$toast({
        message: "Action:" + action + " Index:" + index + "",
        position: "bottom"
      });*/

      this.$emit("CheckClickEvent", action, index);
      this.done = true;
      this.undo = false;
    },
    handelDelete(action, index) {
      /*this.$toast({
        message: "Action:" + action + " Index:" + index + "",
        position: "bottom"
      });*/

      this.$emit("DelClickEvent", index);
      this.done = true;
      this.undo = false;
    },
  },
};
</script>

<style scope>
.todoitem .content {
  padding-left: 10px;
}
</style>